<!doctype html>
<html ondragstart="return false">
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="关键字">
     <meta name="Description" content="描述">
     <title>网页标题</title>
	 <style>
	 *{
		margin:0;
		padding:0;
	 }
	  body{
	   font-size:12px;
	   font-family:"微软雅黑";
	   background-color:#000;
	  }
	  .box{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
		height:80px;
		width:400px;
		background-color:#fff;
		border-radius:10px;
		background-image:linear-gradient(60deg,#ffff00,#336600,#000099,#cc6600);
		animation:move 2s linear infinite;
	  }
	  .box::after{
		position:absolute;
		content:'';
		width:100%;
		height:100%;
		border-radius:10px;
		background-image:linear-gradient(60deg,#ffff00,#336600,#000099,#cc6600);
		filter:blur(15px);
		z-index:-1;
		
	  }
	  .bg{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
		background-color:#000;
		border-radius:10px;
		width:375px;
		height:60px;
	  }
	  .font{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
		color:transparent;
		font-size:30px;
		font-weight:bold;
		letter-spacing:5px;
		text-align:center;
		line-height:80px;
     	background-image:linear-gradient(60deg,#ffff00,#336600,#000099,#cc6600); 
		-webkit-background-clip:text;
		user-select:none;
	  }
	  @keyframes move{
		100%{
			filter:hue-rotate(360deg);
		}
	  }
	 </style>
 </head>
 <body>
	<div class='box'>
		<div class='bg'></div>
		<p class='font'>00:00:00AM</p>
	</div>
	<script>
		let target = document.getElementsByClassName('font')[0];
		function timeChange(){
			let ext = 'AM';
			let date = new Date();
			let hours = date.getHours();
			let min = date.getMinutes();
			let sec = date.getSeconds();
			if(sec<10){
				sec = '0' + sec;
			}
			if(min<10){
				min = '0' + min;
			}
			if(hours>12){
				hours = hours-12;
				ext = "PM";
			}
			target.innerText = hours+':'+min+':'+sec+ext;
		}
		setInterval(timeChange,1000);
	</script>
 </body>
</html>